import React, { useState } from 'react';
import Header from './Header.jsx';
import Sidebar from './Sidebar.jsx';
import Footer from './Footer.jsx';
import styles from './Layout.module.css';

const AppLayout = ({ children }) => {
    const [sidebarCollapsed, setSidebarCollapsed] = useState(false);

    const toggleSidebar = () => {
        setSidebarCollapsed(!sidebarCollapsed);
    };

    return (
        <div className={styles.appLayout}>
            <Header />
            <div className={styles.mainContainer}>
                <Sidebar
                    collapsed={sidebarCollapsed}
                    onToggle={toggleSidebar}
                />
                <main
                    className={styles.mainContent}
                    style={{
                        paddingLeft: sidebarCollapsed ? '80px' : '200px',
                        transition: 'padding-left 0.2s ease'
                    }}
                >
                    {children}
                </main>
            </div>
            <Footer />
        </div>
    );
};

export default AppLayout;